<template>
  <el-drawer
      direction="rtl"
      v-model="visible"
  >
    <template #header>
      <span class="flow-ant-drawer-title">
      <el-icon><EditPen/></el-icon>
        <!-- <EditName v-model:value="node.name"/> -->
        <el-input ref="imputRef" v-if="isInput" type="text" autofocus @blur="isInput = false"
              v-model="node.name" :style="{ width: width }"/>
            <span v-else @click.stop="clickEvent()">{{ node.name }}</span>
      </span>
    </template>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <el-form>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">节点名称</p>
            <el-form-item name="name">
              <el-input v-model="node.name" :size="size" class="w-full" placeholder="节点名称"/>
            </el-form-item>
          </div>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">事件类型</p>
            <div class="flow-setting-option">
              <div class="flow-setting-option-item">
                <div class="flow-setting-option-item-left">
                  <img :src="optionIcon"/>
                  <div class="flow-setting-option-desc">
                    <p class="setting-option-title">前置事件</p>
                    <p class="setting-option-desc">用于节点前,常用于数据校验</p>
                  </div>
                </div>
                <div class="flow-setting-option-item-switch">
                  <el-switch
                      inline-prompt
                      active-text="是"
                      inactive-text="否"
                  />
                </div>
              </div>
            </div>
            <div class="flow-setting-option">
              <div class="flow-setting-option-item">
                <div class="flow-setting-option-item-left">
                  <img :src="optionIcon"/>
                  <div class="flow-setting-option-desc">
                    <p class="setting-option-title">后置事件</p>
                    <p class="setting-option-desc">用于节点后,常用于数据落地保存</p>
                  </div>
                </div>
                <div class="flow-setting-option-item-switch">
                  <el-switch
                      inline-prompt
                      active-text="是"
                      inactive-text="否"
                  />
                </div>
              </div>
            </div>
            <div class="flow-setting-option">
              <div class="flow-setting-option-item">
                <div class="flow-setting-option-item-left">
                  <img :src="optionIcon"/>
                  <div class="flow-setting-option-desc">
                    <p class="setting-option-title">WebHook</p>
                    <p class="setting-option-desc">远程API调用</p>
                  </div>
                </div>
                <div class="flow-setting-option-item-switch">
                  <el-switch
                      v-model="webhook"
                      inline-prompt
                      active-text="是"
                      inactive-text="否"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">前置事件配置</p>
          </div>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">后置事件配置</p>
            <!-- <a-textarea v-model="noticeContext" :size="size" class="w-full" placeholder="通知内容" /> -->
          </div>
          <div class="flow-setting-item" v-if="webhook">
            <p class="flow-setting-item-title">WebHook配置</p>
            <!-- <a-textarea v-model="noticeContext" :size="size" class="w-full" placeholder="通知内容" /> -->
          </div>
        </el-form>
      </div>
    </div>
    <!-- <FlowDrawerFooter @close="onClose" /> -->
  </el-drawer>
</template>
<script setup name="FlowEventDrawer">
import {flowMixin} from '../../../mixins/flowMixin';
import EditName from '../../../common/EditName.vue';
// import FlowDrawerFooter from '../../../common/DrawerFooter.vue';
import flowhook from '../../../mixins/flowhook';

import {reactive, ref, createApp,    nextTick,
  watch, computed, onMounted, toRefs, defineExpose} from "vue";
import {useStore} from 'vuex';
/* 组件局部注册 */
const store = useStore();
const emit = defineEmits(['close'])

const webhook = ref(false);

const {uuid, nameClass, delNode, drawerWidth, ccIcon, optionIcon} = flowhook();

const node = ref({});
const visible = ref(false);
const noticeContext = ref('');
const noticeType = ref([]);
const isInput = ref(false);

const afterVisibleChange = (val) => {
  console.log('visible', val);
}
const showDrawer = (data) => {
  visible.value = true;
  node.value = data;
}
const onClose = () => {
  visible.value = false;
  emit('close');
}
const imputRef = ref();
const clickEvent = () => {
  isInput.value = true;
}

watch(isInput, () => {
  if (isInput.value) {
    nextTick(() => {
      imputRef.value.focus()
    })
  }
})
defineExpose({
  showDrawer
});
</script>
